<template>
  <div class="register">
    <div class="back" @click="back">
      <van-image
        v-if="areaCode === 0"
        width="32rem"
        height="32rem"
        :src="require('@/assets/images/register/back@2x.png')"
      />
    </div>

    <div class="bg-box">
      <div class="bg"></div>
      <div class="text"></div>
      <div class="tips">欢迎加入我们吧！</div>
    </div>

    <div class="main">
      <div class="title">注册</div>

      <div class="input-box">
        <div class="input u-flex m-b">
          <div class="country u-flex" @click="showPopup = true">
            <van-image
              v-if="areaCode === 0"
              width="36rem"
              height="36rem"
              :src="require('@/assets/images/register/icon_China@2x.png')"
            />

            <van-image
              v-if="areaCode === 1"
              width="36rem"
              height="36rem"
              :src="require('@/assets/images/register/icon_malaysia@2x.png')"
            />

            <div class="areaCode">{{ areaCode == 0 ? "+86" : "+60" }}</div>

            <van-image
              width="16rem"
              height="16rem"
              :src="require('@/assets/images/register/icon_down@2x.png')"
            />
          </div>
          <input type="number" v-model="username" placeholder="请输入手机号" />
        </div>

        <div class="u-flex m-b">
          <div class="input u-flex ">
            <input type="number" v-model="code" placeholder="请输入验证码" />
          </div>

          <div
            class="btn u-flex-center"
            style="font-size: 28rem"
            :style="!show ? 'background: #CCCFD4' : ''"
            @click="getCode"
          >
            {{ text }}
          </div>
        </div>

        <div class="input u-flex m-b">
          <input
            :type="showPSW ? 'text' : 'password'"
            v-model="password"
            placeholder="请输入6-16位密码"
          />

          <van-image
            v-if="showPSW"
            @click="showPSW = false"
            style="margin-right: 24rem"
            width="28rem"
            height="28rem"
            :src="require('@/assets/images/register/login_icon_display@2x.png')"
          />

          <van-image
            v-if="!showPSW"
            @click="showPSW = true"
            style="margin-right: 24rem"
            width="28rem"
            height="28rem"
            :src="require('@/assets/images/register/login_icon_hide@2x.png')"
          />
        </div>

        <div class="input u-flex">
          <input
            :type="showPSW ? 'text' : 'password'"
            v-model="confirm_password"
            placeholder="请再次输入密码"
          />
        </div>
      </div>

      <div class="btn-box">
        <div class="btn u-flex-center" @click="register">立即注册</div>
      </div>
    </div>

    <van-popup v-model="showPopup" position="bottom">
      <van-picker
        title="选择国家与地区"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import header from "@/components/header/header.vue";
import { Field } from "vant";
import { Button, Toast } from "vant";
import { API_PATH } from "@/api/index.js";
import { USER_CODE, USER_REGISTER } from "@/api/api.js";
import { setLocalStorage } from "@/util/local-storge.js";
// import { Field } from 'vant';
Vue.use(Field);
export default {
  name: "login",
  components: {
    [header.name]: header,
    [Button.name]: Button,
  },
  data() {
    return {
      username: "",
      code: "",
      password: "",
      confirm_password: "",
      type: "",
      // 验证码
      text: "发送验证码",
      count: 300,
      show: true,
      showPopup: false,
      columns: ["中国（+86）", "马来西亚（+60）"],
      areaCode: 0,
      showPSW: false,
      addCode: "",
    };
  },
  watch: {
    areaCode(n) {
      switch (n) {
        case 0:
          // 中国
          this.addCode = "";
          break;

        case 1:
          // 马来西亚
          this.addCode = "60";
          break;

        default:
          break;
      }
    },
  },

  mounted() {
    // this.getCode()
  },
  methods: {
    async getCode() {
      if (this.username == "") {
        Toast.fail("请填写手机号");
        return;
      }
      if (/^1[3-9]\d{9}$/.test(this.username)) {
        this.type = "register_cn";
      } else {
        this.type = "register";
      }

      const { data } = await this.$reqGet(USER_CODE, {
        username: this.addCode + this.username,
        type: this.type,
      });
      if (data.status == 1) {
        //this.count = data.data.duration_time
      } else {
        Toast.fail(data.info);
      }
      if (typeof this.text != Number) {
        let timer = this.count;
        let that = this;
        let times = setInterval(function() {
          if (timer == 1) {
            that.text = "发送验证码";
            that.show = true;
            clearInterval(times);
          } else {
            timer--;
            that.text = timer + "s";
            that.show = false;
          }
        }, 1000);
      }
    },
    async register() {
      const { data } = await this.$reqPost(USER_REGISTER, {
        username: this.addCode + this.username,
        code: this.code,
        password: this.password,
        confirm_password: this.confirm_password,
      });
      console.log(data);
      if (data.status == 0) {
        Toast.fail(data.info);
      }
      if (data.status == 1) {
        let token = data.data.token;
        setLocalStorage({
          user_token: token,
        });
        let that = this;
        Toast.success({
          message: "注册成功!",
          onClose: function() {
            that.$router.push({ name: "login" });
          },
        });
      }
    },
    forgetPsw() {
      this.$router.push({ name: "forget" });
    },
    onConfirm(value, index) {
      this.areaCode = index;
      this.showPopup = false;
    },
    back() {
      this.$router.go(-1);
    },
    // async loginExec() {
    //   const { data } = await this.$reqGet(API_PATH, {
    //     method: USER_LOGIN,
    //     user_mobile: this.mobile,
    //     user_pwd: this.password
    //   });
    //   let loginSts = true;
    //   if (data.code != 200 || data.status != 'success' || data.data == '') {
    //     Toast(data.detail);
    //     loginSts = false;
    //     this.isLogining = false;
    //   } else {
    //     setLocalStorage({
    //       user_id: data.data.uid
    //     });
    //   }
    //   return loginSts;
    // },

    // async get() {
    // 	const { data } = await this.$reqGet(USER_TEST, {});
    // }
  },
};
</script>
<style lang="scss" scoped>
.register {
  height: 100vh;
  overflow: hidden;

  .back {
    position: absolute;
    left: 40rem;
    top: 30rem;
  }

  .bg-box {
    height: 412rem;
    background: linear-gradient(180deg, #2cb1ff 0%, #2f81fe 100%);
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;

    .bg {
      width: 400rem;
      height: 400rem;
      background-image: url("../../assets/images/register/photo2@2x.png");
      background-repeat: no-repeat;
      background-size: contain;
    }

    .text {
      position: absolute;
      top: 0;
      left: 0;
      width: 354rem;
      height: 80rem;
      background-image: url("../../assets/images/register/photo1@2x.png");
      background-size: contain;
      background-repeat: no-repeat;
      top: 134rem;
      left: 40rem;
    }

    .tips {
      position: absolute;
      left: 40rem;
      top: 242rem;
      color: #fff;
      font-size: 28rem;
    }
  }

  .main {
    position: relative;
    background-color: #fff;
    border-radius: 40rem;
    height: 100vh;
    margin-top: -40rem;
    z-index: 999;
    padding: 40rem;

    .title {
      text-align: left;
      font-size: 36rem;
      font-weight: bold;
      margin-bottom: 40rem;
    }

    .input-box {
      .input {
        width: 100%;
        height: 88rem;
        border-radius: 44rem;
        border: 2rem solid #eaeaea;
        padding-left: 40rem;
        font-size: 28rem;
        overflow: hidden;

        .country {
          margin-right: 20rem;

          .areaCode {
            font-size: 28rem;
            font-weight: bold;
            margin: 0 16rem 0 12rem;
          }
        }
      }

      .btn {
        background-color: var(--theme);
        color: #fff;
        min-width: 218rem;
        height: 88rem;
        border-radius: 44rem;
        margin-left: 20rem;
      }

      .m-b {
        margin-bottom: 24rem;
      }
    }

    .btn-box {
      margin-top: 80rem;

      .btn {
        height: 88rem;
        background: linear-gradient(138deg, #2cb1ff 0%, #2f81fe 100%);
        box-shadow: 0px 4rem 12rem rgba(75, 150, 255, 0.3);
        border-radius: 44rem;
        font-size: 36rem;
        font-weight: bold;
        color: #fff;
      }
    }
  }
}
</style>
